<template>
  <div class="device-defect">
    <div class="breadcrumb-container">
      <!-- Breadcrumb 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>工单查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <h1 class="title">工单查询</h1>
    </div>

    <!-- 查询条件部分 -->
    <el-form :model="query" class="query-form" inline>
      <!-- 查询条件输入框 -->
      <el-form-item label="设备编码">
        <el-input v-model="query.equipmentId"></el-input>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="query.equipmentName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="query.type">
          <el-radio-button label="待提交"></el-radio-button>
          <el-radio-button label="待审核"></el-radio-button>
          <el-radio-button label="待实施"></el-radio-button>
          <el-radio-button label="待验收"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工单内容">
        <el-input v-model="query.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="query.fixType" placeholder="检修分类">
          <el-option v-for="item in fixType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="query.equipmentMajor" placeholder="专业">
          <el-option v-for="item in equipmentMajor" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="danger" @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="m1">查询</el-button>
        <el-button type="success" @click="showAddModal">添加</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-dialog title="添加数据" :visible.sync="addDialogVisible" width="70%" @close="resetForm('addItem')">
        <el-form :model="addItem" label-width="120px">

          <!-- 第一部分，工单基本信息 -->
          <div class="section">
            <h3>工单基本信息</h3>

            <el-form-item label="设备编号">
              <el-input v-model="addItem.equipmentId"></el-input>
            </el-form-item>
            <el-form-item label="检修分类">
              <el-select v-model="addItem.fixType" placeholder="请选择">
                <el-option label="日修" value="日修"></el-option>
                <el-option label="年修" value="年修"></el-option>
                <el-option label="周修" value="周修"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工单内容">
              <el-input type="textarea" v-model="addItem.content"></el-input>
            </el-form-item>
            <el-form-item label="点检分工">
              <el-input v-model="addItem.spotCheckJob"></el-input>
            </el-form-item>
            <el-form-item label="检修分工">
              <el-input v-model="addItem.overhaulJob"></el-input>
            </el-form-item>
            <el-form-item label="操作分工">
              <el-input v-model="addItem.operateJob"></el-input>
            </el-form-item>
            <el-form-item label="实施方式">
              <el-input v-model="addItem.todoMethod"></el-input>
            </el-form-item>
            <el-form-item label="计划开始时间">
              <el-date-picker v-model="addItem.scheduledBeginTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="计划结束时间">
              <el-date-picker v-model="addItem.scheduledEndTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="工单环节">
              <el-input v-model="addItem.workOrderLink"></el-input>
            </el-form-item>
            <el-form-item label="计划备件">
              <el-input v-model="addItem.plannedSpare"></el-input>
            </el-form-item>
            <el-form-item label="计划备件费用">
              <el-input v-model="addItem.plannedSpareCost"></el-input>
            </el-form-item>
            <el-form-item label="计划材料">
              <el-input v-model="addItem.plannedMaterial"></el-input>
            </el-form-item>
            <el-form-item label="计划材料费用">
              <el-input v-model="addItem.plannedMaterialCost"></el-input>
            </el-form-item>
            <el-form-item label="计划工器具">
              <el-input v-model="addItem.plannedTool"></el-input>
            </el-form-item>
            <el-form-item label="计划工器具费用">
              <el-input v-model="addItem.plannedToolCost"></el-input>
            </el-form-item>
            <el-form-item label="计划人工">
              <el-input v-model="addItem.plannedLabor"></el-input>
            </el-form-item>
            <el-form-item label="计划人工费">
              <el-input v-model="addItem.plannedLaborCost"></el-input>
            </el-form-item>

          </div>

          <!-- 第二部分，工单实施信息 -->
          <div class="section">
            <h3>工单实施信息</h3>

            <el-form-item label="实际开始时间">
              <el-date-picker v-model="addItem.actualBeginTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="实际结束时间">
              <el-date-picker v-model="addItem.actualEndTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="实施人">
              <el-input v-model="addItem.implementerUserId"></el-input>
            </el-form-item>
            <el-form-item label="工作报告">
              <el-input type="textarea" v-model="addItem.workReport"></el-input>
            </el-form-item>
            <el-form-item label="实施单位">
              <el-input v-model="addItem.implementUnit"></el-input>
            </el-form-item>
            <el-form-item label="实际备件">
              <el-input v-model="addItem.actualSpare"></el-input>
            </el-form-item>
            <el-form-item label="实际备件费用">
              <el-input v-model="addItem.actualSpareCost"></el-input>
            </el-form-item>
            <el-form-item label="实际材料">
              <el-input v-model="addItem.actualMaterial"></el-input>
            </el-form-item>
            <el-form-item label="实际材料费用">
              <el-input v-model="addItem.actualMaterialCost"></el-input>
            </el-form-item>
            <el-form-item label="实际工器具">
              <el-input v-model="addItem.actualTool"></el-input>
            </el-form-item>
            <el-form-item label="实际工器具费用">
              <el-input v-model="addItem.actualToolCost"></el-input>
            </el-form-item>
            <el-form-item label="实际人工">
              <el-input v-model="addItem.actualLabor"></el-input>
            </el-form-item>
            <el-form-item label="实际人工费">
              <el-input v-model="addItem.actualLaborCost"></el-input>
            </el-form-item>

          </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addData">确 定</el-button>
        </div>
      </el-dialog>


    </div>

    <!-- 查询结果部分 -->
    <div class="result-container">
      <h2 class="result-title">查询结果</h2>
      <el-table :data="list" style="width: 100%" @row-click="goToDetail">
        <!-- 表格列定义 -->
        <el-table-column label="设备编码" prop="equipmentId"></el-table-column>
        <el-table-column label="设备名称" prop="equipmentName"></el-table-column>
        <el-table-column label="检修分类" prop="equipmentId"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="工单内容" prop="content"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click.stop="deleteItem(scope.$index, scope.row)">删除</el-button>
            <el-select v-model="scope.row.state" placeholder="请选择状态" style="width: 100px; margin-right: 10px;"
              @change="changeStatus(scope.row)">
              <el-option label="待提交" value="dtj"></el-option>
              <el-option label="待审核" value="dsh"></el-option>
              <el-option label="待实施" value="dss"></el-option>
              <el-option label="待验收" value="dys"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination :current-page.sync="query.page" :page-size="query.size" :total="count"
        layout="total, prev, pager, next" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "WorkOrder",
  data() {
    return {
      addDialogVisible: false,  // 对话框是否可见
      addItem: {
        lubricationPart: '',
        oilType: '',
        baseDate: '',
        equipmentMajor: '',
        id: '',
        equipmentId: '',
        lubricationMethod: '',
        cycle: '',
        standard: '',
        equipmentName: '',
        oilAmount: '',
        oilSupplyType: '',
        executionPositionCode: '',
        type: ''
      },
      allData: [],        // 所有数据
      count: 0,       //总记录数
      query: {
        equipmentId: "",
        equipmentName: "",
        state: "",
        isClosed: "",
        fixType: "",
        equipmentMajor: "",
        content: "",
        updateTime: "",
        page: 1,
        size: 5
      },
      list: [
        // 省略设备数据
      ],
      fixType: [
        {
          value: '日修',
          label: '日修'
        }, {
          value: '定修',
          label: '定修'
        }, {
          value: '年修',
          label: '年修'
        }
      ],
      equipmentMajor: [
        {
          value: '汽机',
          label: '汽机'
        }, {
          value: '化学',
          label: '化学'
        }, {
          value: '电气',
          label: '电气'
        },
        {
          value: '燃料',
          label: '燃料'
        }
      ]
    };
  },
  mounted() {
    this.list = [];
    this.m1()
  },
  methods: {
    changeStatus(row) {
      axios.post('http://localhost:9527/workOrder/update', {
        id: row.id, // row.id 应该是记录的唯一标识
        state: row.state
      });
    },
    showAddModal() {
      this.addDialogVisible = true;
    },

    // 添加新的数据
    addData() {
      // 对话框中的数据可以通过 this.addItem 获得
      axios.post('http://localhost:9527/workOrder/add', this.addItem)
        .then((response) => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.addDialogVisible = false;  // 成功后关闭对话框
            this.m1();                      // 重新获取列表数据
          }
        })
        .catch(error => {
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
          console.error("添加失败", error);
        });
    },
    statusFormatter(row) {
      if (row.status === "待提交") {
        return {
          style: 'color: #ff0000',  // Red for 待提交
          text: row.status
        }
      } else if (row.status === "待审核") {
        return {
          style: 'color: #ff9900',  // Orange for 待审核
          text: row.status
        }
      } else if (row.status === "待实施") {
        return {
          style: 'color: #3366ff',  // Blue for 待实施
          text: row.status
        }
      } else if (row.status === "待验收") {
        return {
          style: 'color: #009933',  // Green for 待验收
          text: row.status
        }
      }
      return row.status;    // Default color for any other status
    },
    handleCurrentChange(val) {
      //当前页面改变时触发
      this.query.page = val;
      this.m1();
      console.log(`当前页: ${val}`);
      console.log(this.query.page);
      console.log(this.query);
    },
    deleteItem(index, row) {
      this.$confirm('此操作将永久删除该条目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:9527/workOrder/deleteWorkOrder/${row.id}`)
          .then((response) => {
            if (response.status === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.list.splice(index, 1);   //这个可选，如果你希望在删除之后立刻从界面上移除
              this.m1();                     //重新获取列表数据
            }
          })
          .catch(error => {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
            console.error("请求出错", error);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    goToDetail(row) {
      // 注意，在这个例子里，我们假设你的数据有一个唯一识别的字段名为 'id'。实际数据可能会不同。
      this.$router.push({ name: 'OrderDetail', params: { id: row.id } })
    },
    m1() {
      let requestBody = { ...this.query };
      delete requestBody.page;
      delete requestBody.size;

      for (let prop in requestBody) {
        if (requestBody[prop] === "" || requestBody[prop] === null || requestBody[prop] === undefined) {
          // If the property is empty, delete it from the request body
          delete requestBody[prop];
        }
      }

      let requestParams = {
        page: this.query.page,
        size: this.query.size
      };

      axios.post("http://localhost:9527/workOrder/page-search", requestBody, {
        params: requestParams
      })
        .then(data => {
          this.list = data.data.data.records;
          this.count = data.data.data.total;
          console.log(data);
        })
        .catch(error => {
          console.error("post请求出错", error)
        });
    },
    resetQuery() {
      // 重置查询条件
      this.query = {
        equipmentId: "",
        equipmentName: "",
        state: "",
        isClosed: "",
        fixType: "",
        equipmentMajor: "",
        content: "",
        updateTime: "",
        page: 1,
        size: 5
      }
    },
  },
}


</script>

<style scoped>
.device-defect {
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
}

.flex-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.el-form-item {
  flex-basis: 45%;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  margin: 0;
}

.query-form {
  margin-bottom: 20px;
}

.result-container {
  margin-top: 20px;
}

.result-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 可以继续添加其他样式来自定义界面 */
</style>